<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>JQuery Filter 2</title>
		<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				// :contains()选取含有指定文本的元素
				$('div:contains("baidu")').css('color', 'red');
				
				// :empty选取不包含子元素或空文本的元素
			
				// :has(className)选择子元素含有class是red的元素
				$('ul:has(.red)').css('color', 'maroon'); // 选择子元素有class是red的ul列表(即第一个ul列表)
				// 等价于$('ul').has(.red).css('color', 'maroon');
			
				// :parent选取含有子元素或文本的元素, 和:empty相反
				$('div:parent').css('background', '#ccc');
				
				// parent方法和:parent过滤器的含义截然不同
				// parent()方法选择当前元素的父元素
				// parents()方法选择当前元素的父元素及祖先元素
				// parentsUntil()方法选择当前元素极祖先元素直到指定的元素为止
				$('li').parentsUntil('body').css('font-weight', 'bold');
				
				// :hidden选取所有不可见元素
				// :hidden过滤器一般是包含的内容为: CSS样式为display:none, input表单类型为type="hidden"和visibility:hidden的元素
				var hiddenElementSize = $('div:hidden').length;
				alert(hiddenElementSize);
				// :visible选取所有可见元素
				var visibleElementSize = $('div:visible').length;
				alert(visibleElementSize);
			});	
		</script>
		</head>
	<body>
		<div>baidu.com</div>
		<div>google.com</div>
		<div style="display:none;">Hidden 1</div>
		<div style="display:none;">Hidden 2</div>
		<div style="display:none;">Hidden 3</div>
		
		<ul>
			<li class="red">Item 1</li>
			<li>Item 2</li>
			<li>Item 3</li>
		</ul>
		
		<ul>
			<li>Another Item 1</li>
			<li>Another Item 2</li>
			<li>Another Item 3</li>
		</ul>
	</body>
</html>